<template>
  <div class="login-wrap">
    <div class="ms-login">
      <el-form :model="form" :rules="rules" ref="form" class="ms-content" label-position="right">
        
        <el-form-item prop="userName" label="用户名">
          <el-input v-model="form.userName" placeholder="userName" tabindex="1" style="width:220px">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            type="password"
            placeholder="password"
            v-model="form.password"
            @keyup.enter.native="submitForm('form')"
            tabindex="2"
            style="width:220px"
          >
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button
            size="small"
            @click="submitForm('form')"
            style="width:220px"
          >登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        userName: "admin",
        password: "qazwsx",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await this.$axios.post(this.API.login.login, {
            userName: this.form.userName,
            password: this.form.password,
          });
          let { code, data, message } = res.data;
          if (code == 0) {
            // that.$router.push('/')//否则跳转至首页
            console.log(data)
            let { userName } = data[0];
            this.userinfo = { ...data };
            this.$message.success("登录成功")
            localStorage.setItem("userName", userName)
           // localStorage.setItem("token", token)
            localStorage.setItem("userInfo", JSON.stringify(data))
    console.log(userName)
            if (this.$route.query.redirect) { //如果存在参数
              let redirect = this.$route.query.redirect
              this.$router.push(redirect)//则跳转至进入登录页前的路由
            } else {
              this.$router.push('/admin/Dashboard')//否则跳转至首页
            }
            // this.reqLoginInfo();//请求登陆者信息

          } else {
            this.$message.error(message);
          }
        } else {
          return false;
        }
      });
    },
    async  reqLoginInfo () {
      let { avatar, department, email, id, language, nickname, note,
        phone, position, userName } = this.userinfo;
      let res = await this.$axios.get(this.API.login.loginInfo, {
        params: {
          avatar, department, email, id, language, nickname, note, phone, position, userName
        }
      })
      let { code, data, message } = res.data
      if (code == 0) {
        let { userName, avatar } = data;
        this.$message.success('恭喜您登录成功')
        localStorage.setItem("userName", userName)
        localStorage.setItem("avatar", avatar)
        this.$router.push('/admin/Dashboard')//否则跳转至首页
      } else {
        this.$message.error(message)
      }
    }
  },
};
</script>

<style lang="less" scoped>
.el-dropdown-link {
  color: #409eff;
}
.login-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../../assets/images/login-bg.jpg) no-repeat center;
  background-size: 100% 100%;
  text-align: center;
  .ms-login {
    padding-top: 180px;
  }
  .ms-content {
    padding: 40px 30px;
    width: 400px;
    height: 240px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
  }
  .login-btn {
    text-align: center;
  }
  .login-btn button {
    width: 220px;
    height: 36px;
    margin-bottom: 10px;
    position: relative;
    left: 62px;
  }
  img {
    vertical-align: middle;
    position: relative;
    top: 70px;
    left: 20px;
  }
}
</style>
<style lang="less">
.login-wrap {
  .el-form-item__label {
    padding-right: 0;
  }
  .el-form-item__content {
    float: right;
  }
}
</style>
